<template>
  <div class="lyricSon">
    <div class="placeholder"></div>
    <div
      class="lyricItem"
      :class="lyricIndex - 1 === index ? 'lyricFont' : ''"
      :style="{ color: openMv ? '#fff' : '#666' }"
      v-for="(item, index) in lyric"
      :key="index"
    >
      {{ item[1] }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'lyricPage',
  data() {
    return {
      // 当前这一句的歌词索引
      lyricIndex: 0,
      // placeholder高度
      heightResult: 0
    }
  },
  props: {
    lyric: {
      type: Array,
      default() {
        return []
      }
    },
    openMv: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 获取当前播放歌词的索引，第几句
    getLyricIndex(currentTime) {
      let index = 0
      this.lyric.some((item) => {
        if (index < this.lyric.length - 1) {
          if (currentTime >= item[0]) {
            index += 1
          }
        }
      })
      this.lyricIndex = index
    },
    // 歌词滚动的距离
    lyricScroll(lyricIndex) {
      // console.log(this.lyric[lyricIndex - 1][1])
      // 获取歌词框
      let lyricBox = document.querySelectorAll('.lyricSon')
      // 获取当前歌词的盒子
      let lyricNow = lyricBox[0].children[lyricIndex] // 这里不需要-1 因为我们加了一个盒子站位
      // 让当前播放的那一句保持在歌词框的中间就可以了
      // 需要移动的距离 = 获取当前歌词距离歌词框的高度 - 获取歌词框的高度 / 2
      // console.log(lyricNow.offsetTop, lyricBox[0].clientHeight / 2)
      if (lyricNow) {
        // 只有需要播放的这一句才滑动，其他的句子不需要
        lyricBox[0].scrollTo({
          behavior: 'smooth',
          top: lyricNow.offsetTop - lyricBox[0].clientHeight / 2
        })
      }
    }
  },
  watch: {
    '$store.state.currentTime'(currentTime, oldTime) {
      if (Math.abs(oldTime - currentTime) > 1) {
        // console.log('拖动')
        // 判断两次时间变化是否大于一，大于1 说明是拖动进度条需要重新校准歌词位置
        if (this.lyric.length > 1) {
          this.getLyricIndex(currentTime)
          this.lyricScroll(this.lyricIndex)
        }
      }
      if (this.lyricIndex < this.lyric.length) {
        if (currentTime >= this.lyric[this.lyricIndex][0]) {
          this.lyricIndex += 1
          this.lyricScroll(this.lyricIndex)
        }
      }
    },
    // 监听vuex中的musicId 重置歌词索引
    '$store.state.musicId'() {
      this.lyricsIndex = 0
    },
    lyric() {
      if (this.$store.state.currentTime > 1) {
        // 请求有延迟需要重新校准歌词位置
        if (this.lyric.length > 1) {
          // console.log('延迟')
          this.getLyricIndex(this.$store.state.currentTime)
          this.$nextTick(() => {
            this.lyricScroll(this.lyricIndex)
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.lyricSon {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: scroll;
  .lyricItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 60px;
    font-size: 16px;
    color: #666;
    transition: all 1s;
  }
}
.lyricSon::-webkit-scrollbar {
  display: none;
}
// 播放对应的歌词
.lyricFont {
  font-weight: 700;
  color: #000;
  font-size: 20px !important;
}
// 站位空盒子
.placeholder {
  width: 100%;
  height: 120px;
}

.fontColor {
  color: #fff !important;
}
</style>
